<template>
    <div class="tips">
        <div>
            <img src="https://pic.c-ctrip.com/flight_intl/book/svgs/green.svg"
                style="height: 45px; width: 25px;position: absolute;left: 15px;top: 5px;">
            <span style="color: #00b87a;font-size: 20px;margin-left: 50px;line-height: 2.65;">出行提醒</span>
            <span style="position: absolute;right: 5px;top: 16px;color: rgba(153, 153, 153, 1);">更新日期: 2022-06-28
                12:55:24</span>
        </div>
        <div class="tipmsg">
            <div style=" width: 800px;position: absolute;top: 20px;left: 50px;">
                受新冠疫情影响，各地疫情防控政策调整频繁，请在出行前务必与出发地、目的地、经停（转）地疫情管控相关单位进一步确认核酸检测报告时限要求以及落地管控政策，合理安排出行。
            </div>
        </div>
    </div>
    <div class="pgup" @click="pgup">
        返回上一页
    </div>
    <div class="box">
        <div class="header">
            <div class="header-tip">
                <img src="../../assets/最近告警.png" alt="" style="margin-left:10px; margin-top:2px;width:35px;">
                <span>15分钟内完成支付，即可预订成功。</span>
                <h3 style="float: right;margin: 8px 20px;color:#ff9913;">该订单剩余支付时间:{{time}}分钟</h3>
            </div>
            <p style="font-size: 26px;margin-bottom:10px;margin-left:40px;color:#606266;">购票人信息</p>
            <div class="peopleMsgStyle">
                <div class="activeStyle" v-for="(people, index) in Msg.peopleMsg" :key="index"
                    :class="{active:index==number}">
                    <div :class="{showdisplay:index==number,hidedisplay:index!=number}" class="showMoreMsg">
                        <span style="color: #849bab;margin-right:10px;">电话号码</span>
                        <span style="font-weight:700;margin-right:70px;">{{people.phone}}</span>
                        <span style="color: #849bab;margin-right:10px;">家庭住址</span>
                        <span style="font-weight:700;margin-right:10px;">{{people.address}}</span>
                    </div>
                    <div class="peopleMsg">
                        <h4
                            style=" width: 30px;height: 30px;background: #eaf0f3;border-radius: 6px;text-align: center;line-height: 2; margin-top: 28px;margin-left: 10px;">
                            {{index+1}}</h4>
                        <span style="color: #849bab;">{{ people.peopleType == "普通群众" ? '成人' : people.peopleType}}</span>
                        <span style="font-weight:700;">{{people.nickname}}</span>
                        <span style="color: #849bab;">年龄</span>
                        <span style="font-weight:700;">{{people.age}}</span>
                        <span style="color: #849bab;">身份证</span>
                        <span
                            style="font-weight:700;">{{people.cardId.slice(0,4)}}***********{{people.cardId.slice(15,18)}}</span>

                    </div>
                    <span style="position: absolute;top: 32px;right:20px;cursor: pointer;color:#409EFF;"
                        @click="change(index)">更多信息</span>

                </div>

            </div>
        </div>
        <div class="body">
            <div class="body_msg">
                <p style="text-align: center;font-size: 26px;margin-top:25px;color:#606266;">机票信息</p>
                <div class="manyMsg" v-if="Msg.orderMsg.length>1">
                    <div class="planeMsgBox" v-for="(i,index) in Msg.orderMsg" :key="index">
                        <div
                            style="width:400px;height:20px;background-color:#fff;display:flex;position: absolute;justify-content: center;">
                            <i
                                style="font-size:10px;margin-top:5px;margin-right:10px;">起飞时间</i>{{i.startTime.slice(0,5)}}
                            <img src="../../assets/直线.png" alt="" style="width:50px;">
                            <i style="font-size:10px;margin-top:5px;margin-right:10px;">降落时间</i>{{i.endTime.slice(0,5)}}
                        </div>
                        <div
                            style="width:420px;height:70px;position: absolute;top:20px;font-size:24px;margin-top: 5px;">
                            <div style="display:flex;line-height: 2;justify-content: space-evenly;width:95%;">
                                <i style="margin-right: 10px;">{{i.upCity}}</i>
                                <img src="../../assets/小飞机.png" alt="" style="width:40px;height:40px">
                                <i>{{i.downCity}}</i>
                            </div>
                            <div style="display: flex;justify-content: space-around;">
                                <span style="font-size:16px;">{{i.upAirportName}}</span>
                                <span style="font-size:16px;">{{i.downAirportName}}</span>
                            </div>
                        </div>
                        <div style="width:46%;height:100px;right:0;position: absolute;">
                            <span style="position: absolute;font-size:24px;right:10px;"><i
                                    style="font-size:18px;margin-top:5px;margin-right:10px;">起飞日期：</i>{{i.startDate}}</span>
                            <span
                                style="position: absolute;font-size:17px;top:50px;right:10px;">{{i.company}}{{i.fname}}<i
                                    style="margin-left:20px;">预计机型：{{i.pname}}</i></span>

                        </div>
                    </div>
                    <div style="position: absolute;bottom:80px;">
                        <div class="header-tip" style="width:455px;margin-left:160px ; ">
                            <img src="../../assets/最近告警.png" alt=""
                                style="margin-left:40px; margin-top:2px;width:35px;">
                            <span>该航班预计在扣款成功后3小时内完成出票，保障出行。</span>
                        </div>
                        <div style="width: 500px;height: 40px;margin-left:140px;margin-top:10px;text-align:center;">
                            订单金额：<span style="color: #ff8c18;font-size: 24px;">￥</span><span
                                style="font-family: 'PingFangSC-Regular', Arial;color: #ff8c18;font-size: 42px;"><i>{{price}}</i></span>
                        </div>
                        <div>
                            <el-button type="success" plain
                                style="width: 500px;height: 40px;margin-left:140px;margin-top:20px;" @click="success()">
                                支付订单</el-button>
                        </div>
                    </div>
                </div>
                <div v-else>
                    <div class="timeAndCity">
                        <span style="margin-right:20px;">{{Msg.orderMsg.startDate.slice(5)}}</span>
                        <span>{{DAY[day]}}</span>
                        <div class="cityaddress">
                            <ul>
                                <li>{{Msg.orderMsg.upCity}}</li>
                                <li><img src="../../assets/小右箭头.png" alt="" style="width:40px;margin:-5px 0"></li>
                                <li>{{Msg.orderMsg.downCity}}</li>
                            </ul>
                        </div>

                    </div>
                    <div class="companyStyle">
                        <img :src="Msg.orderMsg.companyLogos" alt="">
                        <span style="margin-left:15px;">{{Msg.orderMsg.company}}</span>
                        <span>{{Msg.orderMsg.fname}}</span>
                        <span style="margin-left:50px;">{{Msg.orderMsg.pname}}</span>
                        <span style="margin-left:15px;">{{Msg.orderMsg.ticketTypeName}}</span>
                    </div>
                    <el-divider></el-divider>
                    <div class="planetime">
                        <p style="position: absolute;top:-22px;left:140px;color:#849bab;">
                            <img src="../../assets/时钟.png" alt=""
                                style="width:20px;position: absolute;top: 1px;left: -26px;">
                            {{Msg.orderMsg.sailingTime.slice(0,2)}}h
                            {{Msg.orderMsg.sailingTime.slice(3,5)}}m
                        </p>
                        <span>
                            {{Msg.orderMsg.startTime.slice(0,5)}}
                        </span>

                        <img src="../../assets/直线.png" alt="" style="width:145px;">
                        <img src="../../assets/小飞机.png" alt=""
                            style="width:50px;position:absolute;left: 150px;background-color:#f5fbfe ;">
                        <span>
                            {{Msg.orderMsg.endTime.slice(0,5)}}
                        </span>
                    </div>
                    <div style="width:100%;height:50px;display:flex;">

                        <p style="margin-left:230px;">{{Msg.orderMsg.upAirportName}}</p>
                        <p style="margin-left:150px;">{{Msg.orderMsg.downAirportName}}</p>
                    </div>
                    <div class="header-tip" style="width:455px;margin: auto; ">
                        <img src="../../assets/最近告警.png" alt="" style="margin-left:40px; margin-top:2px;width:35px;">
                        <span>该航班预计在扣款成功后3小时内完成出票，保障出行。</span>
                    </div>
                    <div style="width: 500px;height: 40px;margin-left:140px;margin-top:10px;text-align:center;">
                        订单金额：<span style="color: #ff8c18;font-size: 24px;">￥</span><span
                            style="font-family: 'PingFangSC-Regular', Arial;color: #ff8c18;font-size: 42px;"><i>{{price}}</i></span>
                    </div>
                    <div>
                        <el-button type="success" plain
                            style="width: 500px;height: 40px;margin-left:140px;margin-top:20px;" @click="success()">支付订单
                        </el-button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { Log } from '@icon-park/vue-next';
import { ElMessage } from 'element-plus'
import { ref, defineEmits, reactive, inject,getCurrentInstance, onMounted,onBeforeMount} from 'vue'
import { useRouter, useRoute } from "vue-router";
import { useStore } from '../../store/store';
import url from "../../common/js/APIUtil"
const {proxy} =getCurrentInstance()
const router = useRouter();
const route = useRoute();
const emits = defineEmits(['update']);


onBeforeMount(()=>{
    getPlaneMsg();
 
})
let store=useStore()
let paymsg=reactive({
    msg:{}
})
paymsg.msg=store.paymsg
const dataTicket = JSON.parse(localStorage.getItem('ticket'))
let Msg=reactive({
    orderMsg:[],
    peopleMsg:[],
    ticktMsg:[]
})
// 重置数据格式
const send_out = () => {
    if (dataTicket.tickets) {// 中转
        Msg.orderMsg = dataTicket.tickets
        Msg.ticktMsg = JSON.parse(localStorage.getItem("tickets"))
        Msg.peopleMsg = JSON.parse(localStorage.getItem("people"))
        
    } else if (dataTicket.round) {// 往返
        Msg.orderMsg = dataTicket.round
        Msg.ticktMsg = JSON.parse(localStorage.getItem("tickets"))
        Msg.peopleMsg = JSON.parse(localStorage.getItem("people"))
    } else if (dataTicket.multipass) {// 多程
        Msg.orderMsg = dataTicket.multipass
        Msg.ticktMsg = JSON.parse(localStorage.getItem("tickets"))
        Msg.peopleMsg = JSON.parse(localStorage.getItem("people"))
    } else {// 直达
        Msg.orderMsg = dataTicket
        Msg.ticktMsg = JSON.parse(localStorage.getItem("tickets"))
        Msg.peopleMsg = JSON.parse(localStorage.getItem("people"))
    }
}
let price = localStorage.getItem("price")
send_out()

// 求周几
const DAY=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"]
let strday=ref(Msg.orderMsg.startDate)
var day=new Date(strday.value).getDay()
let d=ref()
let getD = function (ticketDay) {
    d=DAY[ticketDay]
    return d;
}

let number=ref(-1)
let change=function(index)
{
    if(number.value!=index)
    {
        number.value=index
    }
    else{
        number.value=-1
    }
}
let orderId=localStorage.getItem("order_id")
let byorder=sessionStorage.getItem("Byorder")
let success=function(){

    sessionStorage.setItem("Byorder",2)

    proxy.$http({
        method:"get",
        url:url.API_GET_UPMONEY+sessionStorage.getItem("id")+"/"+price
    }).then(res=>{
        if(res)
        {
            proxy.$http({
            method:"get",
            url:url.API_Update_OrderStatus_ById+orderId+"/"+"2"
            }).then(res=>{
                if(res){
                    ElMessage.success("付款成功!!!") 
                }
            })
            clearInterval(timer)
            timer = null
        }
        else{
            ElMessage.error("余额不足！！")
        }
    })

    router.push({
        path:"/index/passenger/success"
    })

}
let pgup=function(){
    proxy.$router.back()
}

let planMsg=reactive({
    msg:[]
})
let getPlaneMsg=function(){
    proxy.$http({
    method:"get",
    url:url.API_GET_ORDER_BYORDERID+orderId,
    }).then(res=>{
        planMsg.msg=res.data[0]
    })

}
getPlaneMsg()
let time=ref(15)

let timer = null

let dishiqi=function(shijian){
    if(shijian!=0){
        console.log(shijian);
        timer = setTimeout(function(){
            time.value=time.value-1
            dishiqi(shijian-1) 
        },60000)
    }
    else
    {
        proxy.$http({
            method:"get",
            url:url.API_Update_OrderStatus_ById+orderId+"/"+"3"
        }).then(res=>{
            if(res){
                ElMessage.error("订单已过期...")
            }
        })
        router.push({
            path:"/"
        })
    }
}
dishiqi(60)


</script>

<style scoped>
.box {
    margin: 90px auto;
    width: 1530px;
    height: 500px;
    box-shadow: 5px 10px 15px 10px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    display: flex;
}
.tips{
    width: 100%;
    height: 95px;
    position: relative;
    /* background-color: aqua; */
}
.tipmsg{
    width: 100%;
    height: 85px;
    background-color:#fff;
    position: relative;
    color: #333;
    font-weight: 400;
    font-size: 18px;
}
.header{
    width: 100%;
    /* background-color: #909399; */
    position: relative;
    background-color:#e8eef1;

}
.header-tip{
    width: 700px;
    height: 40px;
    background-color: #fff9eb;
    border-radius: 6px;
    margin: 20px 30px;
    position: relative;
}
.header-tip span{
    position: absolute;
    top: 12px;
    color: #6c8291;
    font-size: 14px;
}
.body{
    width: 100%;
    /* background-color: rebeccapurple; */
    
}
.body_msg{
    width: 100%;
    height: 100%;
    margin: auto;
}
.timeAndCity{
    width: 50%;
    height:55px;
    /* background-color: red; */
    position: relative;
    top: 15px;
    left: 25%;
}
.timeAndCity span{
    font-weight: 700;
    font-size:22px;
    color: #606266;
}
.cityaddress{
    position: absolute;
    top: -2px;
    right: 0;
}
.cityaddress ul li{
    font-weight: 700;
    font-size:22px;
    list-style: none;
    float: left;
    line-height: 1.5;
    margin: 0 5px;
    color: #606266;
}
.companyStyle{
    width:65%;
    height:50px;
    position: relative;
    display: flex;
    margin: auto;
}
.companyStyle span{
    /* position: absolute;
    top: 15px; */
    color: #849bab;
    font-size: 20px;
    margin: 15px 5px;
}
.planetime{
    width: 55%;
    height: 50px;
    margin: 0 220px;
    display: flex;
    position: relative;
}
.planetime span{
    font-size: 28px;
    font-weight: 500;
    color: #223344;

    margin:5px 15px;
}
.peopleMsgStyle{
    /* display: flex;
    flex-wrap: wrap;
    align-content: center; */
    width:95%;
    height:70%;
    /* background-color:red; */
    margin:auto;
    overflow: scroll;
    overflow-x:hidden;
}

.peopleMsg{
    width: 600px;
    /* background-color: rebeccapurple; */
    height: 100%;
    display: flex;
    justify-content: space-around;
    line-height: 4.8;
}
.peopleMsg span{
    font-size: 18px;
}
.activeStyle{
    width:100%;
    height:85px;
    background-color:#fff;
    margin-bottom:20px;
    position: relative;
    transition: .5s;
}
.active{
    height: 125px;
    transition: .5s;
}
.showMoreMsg{
    width:75%;
    height: 80px;
    position: absolute;
    right: 45px;
    top: 80px;
    /* background-color: blue; */
    display: flex;
}
.showdisplay{
    opacity: 1;
    transition:1.5s;
}
.hidedisplay{
    opacity: 0;
    transition: .2s;
}
.pgup{
position: absolute;top: 205px;right: 20px;color:#849bab;cursor: pointer;
}
.pgup:hover{
    color:#409EFF;
}
.manyMsg{
    width: 100%;
    height: 250px;
    /* background-color: red; */
    overflow: scroll;
    overflow-x: hidden;
}
.planeMsgBox{
    width: 100%;
    height: 100px;
    /* background-color: #223344; */
    position: relative;
    margin-top: 20px;
    
}
</style>

